
<script setup>
	
	import { ref, reactive } from 'vue';
	import readApi from '@/common/apis/read';
  import {imageBaseUrl2} from "@/common/config";
	
	
	/** 阅读记录列表 */
	const list = ref([]);
	
	/** 请求状态 */
	const loading = ref(true);
	
	/** 请求阅读记录列表参数 */
	const reqdata = reactive({
		page: 1,
		ismore: true,
		pageSize: 10
	});
	
	/** 获取阅读记录列表方法 */
	const getlist = async () => {
		if(!reqdata.ismore) return;
		const result = await readApi.readlist(reqdata);
		reqdata.page++
		list.value = [...list.value, ...result.list];
		if(result.length < reqdata.pageSize) reqdata.ismore = false;
		loading.value = false;
	};
	
	/** 获取阅读记录列表 */
	getlist();
	
	
	/** 去阅读记录详情 */
	const toRecordInfo = item => {
		uni.navigateTo({ url: `/pages/course/aireading/record-info?id=${item.id}` });
	};
	
	
</script>

<template>
	<view class="containerbox bgc-white">
		<uv-navbar leftText="阅读记录" auto-back placeholder />
		
		<scroll-view scroll-y class="containerbox" @scrolltolower="getlist">
			<view class="containerbox pb-24">
				<view class="shadow round-10 p-30 mx-30 mt-30" v-for="item in list" :key="item.id" @tap="toRecordInfo(item)">
					<view class="flex items-center justify-between">
						<view class="flex-1 u-line-1 bold">{{ item.thesaurus?.name }}</view>
						<view class="bgc-primary py-5 px-10 round-5 text-white text-22 transition-opacity" hover-class="opacity-70">学情报告</view>
					</view>
					
					<view class="flex items-center justify-between text-24 mt-20">
						<view class="">选择单词：{{ item.wordsNumber }}个</view>
						<view class="">{{ item.createdAt }}</view>
					</view>
				</view>
				
				<dw_loading :status="loading" class="my-auto" v-if="loading" />
				<dw_default :src="`${imageBaseUrl2}/svg/empty.svg`" v-if="!loading && !list.length" class="my-auto" />
			</view>
		</scroll-view>
	</view>
</template>


<style scoped lang="scss">
	.opacity-70{opacity: .7}
	.pb-24{padding-bottom: 24rpx}
	.transition-opacity{transition: opacity .3s}
	.shadow{box-shadow: 0px 0px 5px rgba(215, 215, 215, 0.603921568627451)}
</style>